<template>
	<view class="wrap safe-tab">
		 <view class="box dis-flex flex-dir-column flex-x-center flex-y-center">
		 	<view class="f-42 fb c-25">
		 		请注册账号
		 	</view>
			
			<view class="phone-bg dis-flex flex-y-center">
				<view class="c-25 fb f-36">
					+86
				</view>
				
				<image src="../../static/images/login/arrow_down.png" class="arrow"></image>
				
				<input class="phone c-25 f-34" placeholder="请输入手机号" placeholder-class="f-34 c-BB" type="tel" maxlength="11" v-model="phone" />
			</view>
			
			<view class="code-bg dis-flex flex-y-center">
				<input class="code c-25 f-34" :password="true" minlength="6" placeholder="请输入密码" placeholder-class="f-34 c-BB" type="safe-password" v-model="password" />
			</view>
			<view class="code-bg dis-flex flex-y-center">
				<input class="code c-25 f-34" :password="true" minlength="6" placeholder="再次输入密码" placeholder-class="f-34 c-BB" type="safe-password" v-model="passwordTwo" />
			</view>
			<view class="login bc-00 c-ff f-34" @click.stop="onregister">
				注册
			</view>
		
		 </view>
		
	</view>
</template>

<script>
	import {
		register
	} from "../../api/login.js";
	import st from "../../utlis/showtoast.js";
	
	export default {
		name: 'login',
		data() {
			return {
				phone: "",
				password: "",
				passwordTwo: "",
			}
		},
		onLoad() {
		},
		onReady() {
			
		},
		onShow() {
			
		},
		methods: {
			
			async onregister(){
				if (this.phone.length !== 11) {
				    uni.showToast({
				        'duration': 1500,
				        'icon': 'none',
				        'title': '手机号长度必须为11位'
				    });
				    return; // 停止执行后续代码
				}
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!reg_tel.test(this.phone)) {
				    uni.showToast({
				        'duration': 1500,
				        'icon': 'none',
				        'title': '请输入有效的手机号码'
				    });
				    return; // 停止执行后续代码
				}
				if (!this.password) {
				    uni.showToast({
				        'duration': 1500,
				        'icon': 'none',
				        'title': '请输入密码'
				    });
				    return; // 停止执行后续代码
				}
				if (this.password.length <=5) {
				    uni.showToast({
				        'duration': 1500,
				        'icon': 'none',
				        'title': '密码长度最小为6位'
				    });
				    return; // 停止执行后续代码
				}
				if (this.passwordTwo.length <=5) {
				    uni.showToast({
				        'duration': 1500,
				        'icon': 'none',
				        'title': '密码长度最小为6位'
				    });
				    return; // 停止执行后续代码
				}
				await register({
					'phone': this.phone,
					'password': this.password,
					'passwordTwo': this.passwordTwo,
				}).then(res => {
					console.log(res, '注册');
					uni.showToast({
						'duration':1500,
						'icon':'none',
						'title':res.msg
					})
					if(res.code == 1){
						setTimeout(() => {
						    uni.navigateBack()
						}, 1500);
					}
					
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		overflow: hidden;
		
		.box {
			width: 100%;
			height: 90vh;
			
			.phone-bg {
				margin-top: 42rpx;
				width: 550rpx;
				height: 124rpx;
				border-bottom: 2rpx solid #EEEEEE;
				
				.arrow {
					margin-left: 13rpx;
					width: 28rpx;
					height: 20rpx;
				}
				
				.phone {
					margin-left: 35rpx;
					flex: 1;
					height: 64rpx;
					text-align: left;
				}
			}
			
			.code-bg {
				width: 550rpx;
				height: 114rpx;
				border-bottom: 2rpx solid #EEEEEE;
				.code {
					flex: 1;
					height: 64rpx;
					text-align: left;
					margin-right: 20rpx;
				}
			}
			
			.login {
				margin-top: 85rpx;
				width: 610rpx;
				height: 86rpx;
				border-radius: 43rpx;
				overflow: hidden;
				line-height: 86rpx;
				text-align: center;
				background-color: #409eff;
			}
		
		}
		
		.other-login {
			margin-top: 50rpx;
			width: 220rpx;
			height: 82rpx;
			overflow: hidden;
			>image {
				width: 82rpx;
				height: 82rpx;
			}
		}
		
		
		.wrap-agree {
			position: fixed;
			left: 0;
			bottom: calc(env(safe-area-inset-bottom) + 60rpx);
			width: 100%;
			.choose {
				width: 38rpx;
				height: 38rpx;
				>image {
					width: 100%;
					height: 100%;
				}
			}
		
			.aa {
				margin-left: 11rpx;
			}
			.bb {
				margin-left: 5rpx;
				color: #1D2C59;
			}
		}
		
	}
	.register-box{
		margin-top: 40rpx;
	}
</style>